<template>
  <div class="user">
    <el-popover
      v-if="hasUser"
      placement="bottom-start"
      width="300"
      trigger="hover"
      :visible-arrow="true"
    >
      <Dynamic />
      <nuxt-link slot="reference" to="/dynamic">动态</nuxt-link>
    </el-popover>
    <nuxt-link v-if="hasUser" to="/contribution/contribute" class="contribution"
      >投稿</nuxt-link
    >
    <a
      v-if="!hasUser"
      href="/"
      class="login"
      @click.stop.prevent="dialogVisible = true"
      >登录</a
    >
    <el-popover
      v-else
      placement="bottom-start"
      :width="80"
      trigger="hover"
      :visible-arrow="true"
    >
      <el-row class="avatar_popover">
        <nuxt-link :to="`/user/info`">个人中心</nuxt-link>
        <el-divider></el-divider>
        <nuxt-link to="/exit">退出登录</nuxt-link>
      </el-row>
      <a slot="reference" class="avatar" href="/">
        <el-avatar :src="avatar"></el-avatar>
      </a>
    </el-popover>
    <el-dialog
      :title="isLogin ? '信息青年登录' : '注册'"
      :visible.sync="dialogVisible"
      width="420px"
      height="600px"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <Login
        v-if="isLogin"
        :change-dialog="changeDialog"
        :change-dialog-page="changeDialogPage"
      />
      <Register
        v-else
        :change-dialog="changeDialog"
        :change-dialog-page="changeDialogPage"
      />
    </el-dialog>
  </div>
</template>

<script>
import Login from './login'
import Register from './register'
import Dynamic from './dynamic'
export default {
  components: {
    Login,
    Register,
    Dynamic
  },
  data() {
    return {
      dialogVisible: false,
      isLogin: true
    }
  },
  computed: {
    avatar() {
      return this.$store.getters['user/avatar']
    },
    hasUser() {
      return this.$store.state.user.hasUser
    },
    id() {
      return this.$store.state.user.id
    }
  },
  methods: {
    changeDialog() {
      this.dialogVisible = !this.dialogVisible
    },
    changeDialogPage() {
      this.isLogin = !this.isLogin
    }
  }
}
</script>

<style lang="scss" scoped>
.user {
  display: flex;
  justify-content: flex-end;
  a {
    display: block;
    height: 65px;
    width: 40px;
    padding: 0px 10px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    line-height: 65px;
    &:hover {
      color: $--color-primary;
    }
    text-decoration: none;
  }
  .avatar {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .contribution {
    background-color: $--color-primary;
    &:hover {
      color: #fff;
      background-color: desaturate($--color-primary, 20%);
    }
  }
}
/deep/ .el-divider--horizontal {
  margin: 8px 0px;
}
.avatar_popover {
  a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    width: 100%;
    color: #333;
    text-decoration: none;
    &:hover {
      color: $--color-primary;
    }
  }
}
</style>
